<template>
  <div class="app-container" style="overflow: scroll">
    <div style="width: 1024px;margin: 0 auto">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="150px">

      <el-row>
        <el-col  :span="12">
          <el-form-item label="支票圈存申请解除标识" prop="applyOrCclTp">
            <el-select
              v-model="submitParams.applyOrCclTp"
              clearable
              placeholder="支票圈存申请解除标识"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dictMap.CHECK_APPLY_TYPE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="this.submitParams.applyOrCclTp==='AC01'">
      <el-row>
        <el-col  :span="24">
          <el-form-item label="原报文标识号" prop="oriPkgNo">
            <el-input v-model="submitParams.oriPkgNo"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="12">
          <el-form-item label="原发起参与机构号" prop="oriSender">
            <el-input v-model="submitParams.oriSender" @change="checkbankcode('oriSender')"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="20px">
          <el-button
              icon="el-icon-search"
              plain
              type="primary"
              @click="openBankBranchDialog('oriSender')"
            >
              行名行号查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="24">
          <el-form-item label="原发起参与机构名称" prop="oriSenderName">
            <el-input v-model="submitParams.oriSenderName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      </div>


      <el-row>
        <el-col   :span="12">
          <el-form-item label="出票日期" prop="issuedate">
            <el-date-picker v-model="submitParams.issuedate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="支票号码" prop="checkNumber">
            <el-input v-model="submitParams.checkNumber" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col  :span="12">
          <el-form-item label="出票行行号" prop="checkBrno">
            <el-input v-model="submitParams.checkBrno" @change="checkbankcode('checkBrno')"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="20px">
          <el-button
            icon="el-icon-search"
            plain
            type="primary"
            @click="openBankBranchDialog('checkBrno')"
          >
            行名行号查询
          </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="24">
          <el-form-item label="出票行行名" prop="checkBrname">
            <el-input v-model="submitParams.checkBrname" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col  :span="24">
          <el-form-item label="出票人账号" prop="checkActno">
            <el-input v-model="submitParams.checkActno" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col  :span="12">
          <el-form-item label="货币币种" prop="curcd">
            <el-select style="width: 100%;" v-model="submitParams.curcd" placeholder="货币币种" :disabled="true">
              <el-option
                v-for="dict in dictMap.CURCD"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="金额" prop="amount">
            <ht-amount-input
              v-model="submitParams.amount"
              placeholder="金额"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="12">
          <el-form-item label="校验模式" prop="checkMode">
            <el-select style="width: 100%;" v-model="submitParams.checkMode" placeholder="校验模式">
              <el-option
                v-for="dict in dictMap.CHECK_MODE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col  :span="24">
          <el-form-item label="校验密码" prop="checkPwd">
            <el-input v-model="submitParams.checkPwd" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col  :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="submitParams.remarks" maxlength="256" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>


      <div v-if="this.submitParams.checkMode==='CD03'">
        <el-card class="form-card txnInfo-card" >
          <div slot="header" class="label-header-msg">
            <span>支票图像</span>
          </div>

          <el-row>
            <el-col  :span="24">
              <el-form-item :required="true" label="附件" prop="imgFrnData">
                <ht-upload-form-item
                  ref="attachmentFormItem"
                  :limit="{
                    size: 0,
                    fileCount: 1,
                    type: ['jpg', 'jpeg', 'png'],
                  }"
                  v-model="submitParams.imgFrnData"
                  @successCallback="successCallback"
                ></ht-upload-form-item>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

      </div>


      <el-row>
        <el-col :offset="6" :span="12">
          <el-form-item>
            <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="loading">提 交</el-button>
            <el-button @click="refresh">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
  </div>
  </div>
</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import HtAmountInput from "@/views/components/HtAmountInput";
import { mapGetters } from "vuex";
import { milliSendToDate } from "@/utils/common";
import { checkCircleDepositManagementEntrySave } from "@/api/cnaps/beps/418";

export default {
  name: "CheckCircleDepositManagementEntry",
  mixins: [listPageMixin],
  components: { HtAmountInput,BankBranchDialog },

  data() {
    return {
      // 录入参数
      submitParams: {
        applyOrCclTp:undefined,
        oriPkgNo:undefined,
        oriSender:undefined,
        oriSenderName:undefined,
        issuedate:undefined,
        checkNumber:undefined,
        checkBrno:undefined,
        checkBrname:undefined,
        checkActno:undefined,
        curcd:'CNY',
        amount:undefined,
        checkMode:undefined,
        checkPwd:undefined,
        remarks:undefined,
        imgFrnData:undefined,
        imgBckData:undefined,
      },

      loading: false,
      //
      searchFormDictList: ["CHECK_APPLY_TYPE","CURCD","CHECK_MODE"],

      rules: {
        applyOrCclTp : [ { required: true, message: "请输入支票圈存申请解除标识", trigger: "blur" }],
        oriPkgNo : [ {required: true, max: 35, message: "长度最大为35位", trigger: "blur" }],
        oriSender : [ {required: true, max: 14, message: "长度最大为14位", trigger: "blur" }],
        issuedate : [ { required: true, message: "请输入出票日期", trigger: "blur" }],
        checkNumber : [ { required: true, message: "请输入支票号码", trigger: "blur" },{ max: 32, message: "长度最大为32位", trigger: "blur" }],
        checkBrno : [ { required: true, message: "请输入出票行行号", trigger: ['blur', 'change'] },{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        checkBrname:[{ required: true, message: "请输入出票行行名", trigger: "blur" }],
        checkActno : [ { required: true, message: "请输入出票人账号", trigger: "blur" },{ max: 32, message: "长度最大为32位", trigger: "blur" }],
        amount : [ { required: true, message: "请输入金额", trigger: "blur" }],
        checkMode : [ { required: true, message: "请输入校验模式", trigger: "blur" }],
        checkPwd : [ { required: true, message: "请输入校验密码", trigger: "blur" },{ max: 512, message: "长度最大为512位", trigger: "blur" }],
        remarks : [ { max: 256, message: "长度最大为256位", trigger: "blur" }],


      },
    };
  },
  mounted() {},
  methods: {
    successCallback(res) {
      if (res.code === "S") {
        this.$set(this.submitParams, "imgFrnData", res.result.fileId + "||" + res.result.fileOriginName);
        this.$set(this.submitParams, "imgFrnLen", res.result.fileSize);

      }
    },

    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.loading = true;
          checkCircleDepositManagementEntrySave(this.submitParams)
            .then((response) => {
              this.msgSuccess("录入成功");
              this.$alert(`CORE_ID: ${response.result.rspId}`, "生成交易流水号", {
                confirmButtonText: "确定",
                callback: (action) => {
                },
              });
              this.refresh();
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      console.log(this.globalBusData)
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag === "oriSender") {
        this.$set(this.submitParams, "oriSender", row.bankCode);
        this.$set(this.submitParams, "oriSenderName", row.orgFullname);
      }else if (fromFlag === "checkBrno") {
        this.$set(this.submitParams, "checkBrno", row.bankCode);
        this.$set(this.submitParams, "checkBrname", row.orgFullname);
      }
    },

    checkbankcode(fromFlag) {
      if (fromFlag === "oriSender") {
        let oriSender = this.submitParams.oriSender;
        getBankInfByBankCode(oriSender)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "oriSender", response.result.bankCode);
              this.$set(this.submitParams, "oriSenderName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "oriSender", null);
              this.$set(this.submitParams, "oriSenderName", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "oriSender", null);
            this.$set(this.submitParams, "oriSenderName", null);
          });
      } else if (fromFlag === "checkBrno") {
        let checkBrno = this.submitParams.checkBrno;
        getBankInfByBankCode(checkBrno)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "checkBrno", response.result.bankCode);
              this.$set(this.submitParams, "checkBrname", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "checkBrno", null);
              this.$set(this.submitParams, "checkBrname", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "checkBrno", null);
            this.$set(this.submitParams, "checkBrname", null);
          });
      }
    },



  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
